<template>
	<view class="page">
		<view class="invoice-header" :style="{height:'calc(260rpx + '+ CustomBar+'px)',paddingTop:StatusBar+'px'}">
			<view class="padding-left flex align-center" :style="{height:CustomBar - StatusBar +'px'}" @click="back">
				<text class="cuIcon-back text-xl text-white"></text>
			</view>
			<view class=" height-220 flex flex-direction align-center justify-center">
				<view class=" fu-fs40 text-bold text-white">{{invoiceData.invoice_status ==1?i18n['开票中']:i18n['已开票']}}
				</view>
				<view class="margin-top flex justify-center align-center">
					<text
						class="text-df  text-white">{{ i18n['预计发票金额'] }}：￥{{invoiceData.invoice_price}}</text>
					<image :src="imgBaseUrl + 'invoice/help.png'" mode="widthFix" @click="show = true"
						class="margin-left-28 fu-block-32"></image>
				</view>
			</view>
		</view>
		<view class="invoice-step-wrap w100 height-258 bg-white radius-16">
			<view class=" padding-top-40 padding-bottom-36 text-center text-333 text-df ">
				{{ i18n['增值税电子普通发票'] }}
			</view>
			<view class="invoice-step  flex justify-center align-center">
				<view class=" margin-right-88  flex flex-direction align-center">
					<image class="fu-block-48 margin-bottom-4 relative" :src="imgBaseUrl+'invoice/done.png'" mode="widthFix">
					</image>
					<view class="text-df  text-666">
						下单完成
					</view>
				</view>
				<view class="margin-left-88 flex flex-direction align-center "
					:class="invoiceData.invoice_status ==1?'text-bf':'text-333'">
					<image class="fu-block-48 margin-bottom-4 relative "
						:src="invoiceData.invoice_status ==1?imgBaseUrl+'invoice/no-done.png':imgBaseUrl+'invoice/done.png'"
						mode="widthFix"></image>
					<view class="text-df ">
						{{ i18n['开票完成'] }}
					</view>
				</view>
			</view>
		</view>
		<view class="padding bg-white margin-top-20">
			<view class=" margin-bottom  flex">
				<view class="margin-right-24 text-999 text-df">
					{{ i18n['发票类型'] }}
				</view>
				<view class="text-333 text-df ">
					{{ i18n['电子普通发票'] }}
				</view>
			</view>
			<view class=" margin-bottom  flex">
				<view class="margin-right-24 text-999 text-df">
					{{ i18n['发票内容'] }}
				</view>
				<view class="text-333 text-df ">
					{{ i18n['商品明细'] }}
				</view>
			</view>
			<view class=" margin-bottom  flex">
				<view class="margin-right-24 text-999 text-df">
					{{ i18n['抬头类型'] }}
				</view>
				<view class="text-333 text-df ">
					{{invoiceData.invoice_type == 1?i18n['个人']:i18n['企业']}}
				</view>
			</view>
			<view class=" margin-bottom  flex">
				<view class="margin-right-24 text-999 text-df flex-shrink">
					{{ i18n['发票抬头'] }}
				</view>
				<view class="text-333 text-df ">
					{{invoiceData.invoice_title}}   
				</view>
			</view>
			<view class=" margin-bottom  flex" v-if="invoiceData.invoice_type == 2">
				<view class="margin-right-24 text-999 text-df">
					{{ i18n['公司税号'] }}
				</view>
				<view class="text-333 text-df ">
					{{invoiceData.invoice_company_duty_paragraph}}
				</view>
			</view>
			<view class=" margin-bottom  flex">
				<view class="margin-right-24 text-999 text-df">
					{{ i18n['开票金额'] }}
				</view>
				<view class="text-333 text-df ">
					￥{{invoiceData.invoice_price}}
				</view>
			</view>
			<view class=" margin-bottom  flex" v-if="invoiceData.invoice_update_time">
				<view class="margin-right-24 text-999 text-df">
					{{ i18n['开票时间'] }}
				</view>
				<view class="text-333 text-df ">
					{{invoiceData.invoice_update_time}}
				</view>
			</view>
			<view class=" margin-bottom  flex">
				<view class="margin-right-24 text-999 text-df">
					{{ i18n['申请时间'] }}
				</view>
				<view class="text-333 text-df ">
					{{invoiceData.invoice_add_time}}
				</view>
			</view>
			<view class="download padding-top-8 padding-bottom-20" v-if="invoiceData.invoice_status ==2">
				<view class="flex align-center" @click="downloadInvoive">
					<image :src="imgBaseUrl+'invoice/down.png'" mode="widthFix" class="fu-block-40 margin-right-16">
					</image>
					<text class="text-df text-2f9">{{ i18n['下载发票'] }}</text>
				</view>
				<view class="invoice-look  bg-white radius-16 padding-lr-20 padding-tb-14 margin-top-20">
					<!-- <image :src="imgBaseUrl + 'invoice/invoice.jpeg'" mode="widthFix"></image> -->
					<image :src="invoiceData.invoice_img" mode="widthFix"
						@click="previewImg(invoiceData.invoice_img)" />
				</view>
			</view>
		</view>
		<fu-popup v-model="show" mode="bottom" z-index="100" :safe-area-inset-bottom="true" :border-radius="24"
			ref="popupInvoice" @close="closeshowDrawer">
			<view class="padding">
				<view class=" flex justify-between align-center">
					<text class="cuIcon-close text-xl text-white"></text>
					<text class="text-lg text-333 text-bold">{{ i18n['开票金额说明'] }}</text>
					<text class="cuIcon-close fu-fs40 text-333" @click="show = false"></text>
				</view>
				<view class="margin-top-48 text-666 text-df ">
					<jyf-parser v-html="rulers ? rulers.content:i18n['空']"></jyf-parser>
				</view>
			</view>
		</fu-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				content: global.i18n['·开票金额为消费者实付金额。·现展示为订单预计开票金额，最终金额以发票实际开具为准'],
				invoiceData: {
					billing_type: 1,
					invoice_add_time: "",
					invoice_company_duty_paragraph: "",
					invoice_email: null,
					invoice_price: "",
					invoice_send_goods_num: '',
					invoice_status: "1",
					invoice_title: "",
					invoice_type: "",
					invoice_update_time: 0,
					invoice_rule: '',
				},
				rulers:'',//开票金额说明
			}
		},
		onLoad(options) {
			let {
				order_sn
			} = options;
			if (order_sn) {
				this.getInvoiceData(order_sn);
			}
			this.handleMoney()
		},
		methods: {
			// 开票金额说明
			handleMoney() {
				this.$api
					.post(global.apiUrls.postDistributionRuler, {
						user_id: global.userInfo.id || 0,
						category_id: 15
					})
					.then(res => {
						if (res.data.code == 1) {
							this.rulers = res.data.data;
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			
				this.couponModel = true;
			},
			/**
			 * 返回
			 */
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			/**
			 * @description 关闭发票弹窗
			 */
			closeshowDrawer() {
				this.show = false;

			},
			previewImg(url) {
				uni.previewImage({
					urls: [url],
					current: url
				});
			},
			/**
			 * @description 获取发票详情   如果是修改发票  获取发票原来填写的信息
			 * @param {String} order_sn 订单号
			 */
			getInvoiceData(order_sn) {
				this.$api
					.post(global.apiUrls.pistInvoiceSelect, {
						order_sn: order_sn
					})
					.then(res => {
						if (res.data.code == 1) {
							if (res.data.data) {
								if (res.data.data.invoice_type) this.invoiceData = res.data.data;
							}
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			/**
			 * 下载发票
			 */
			downloadInvoive() {
				let img = this.invoiceData.invoice_img;
				if (!img) {
					this.$message.info(this.i18n['发票链接有误']);
					return;
				}
				uni.showLoading({
					title: this.i18n['下载中...']
				});
				uni.downloadFile({
					url: img,
					success: (res) => {
						uni.hideLoading();
						if (res.statusCode === 200) {
							// console.log(res);
							let tempFilePath = res.tempFilePath;
							// console.log(tempFilePath)
							uni.saveImageToPhotosAlbum({
								filePath: tempFilePath,
								success: function() {
									console.log('save success');
								}
							});
							// uni.saveFile({
							//   tempFilePath: tempFilePath,
							//   success: function (res) {
							//     console.log('保存成功',res.savedFilePath)
							//     // var savedFilePath = res.savedFilePath;
							//   },
							//   fail:function(error){
							//     console.log(error)
							//   }
							// });
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.log(err);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invoice-header {
		background: url($IMG_BASE_URL + 'invoice/invoice-bg.png') no-repeat center/cover;

	}

	.invoice-step-wrap {
		margin-top: -40rpx;

		.invoice-step {
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 30rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 230rpx;
				height: 0px;
				border: 2rpx solid #EEEEEE;
			}
		}
	}

	.text-2f9 {
		color: #2F98FE;
	}

	.invoice-look {
		box-shadow: 0px 3rpx 15rpx rgba(0, 0, 0, 0.06);
		image {
			width: 100%;
			height: auto;
		}
	}
</style>
